import { createTheme, alpha } from '@mui/material';

const getTheme = (darkMode, isXs = false) => {
  const baseColor = '#00fff2';
  const accentColor = '#00fff2';
  
  return createTheme({
    palette: {
      mode: darkMode ? 'dark' : 'light',
      primary: {
        main: baseColor,
      },
      background: {
        ...(!darkMode && {
          default: '#f5f5f5',
          paper: '#ffffff',
        }),
        ...(darkMode && {
          default: '#000203',
          paper: '#000203',
        }),
      },
    },
    typography: {
      allVariants: {
        fontFamily: 'Poppins',
        letterSpacing: '-0.01em',
      },
    },
    spacing: (factor) => `${0.8 * factor}rem`,
    components: {
      MuiTreeItem: {
        styleOverrides: {
          root: {
            ...(!darkMode && {
              background: 'transparent',
            }),
            ...(darkMode && {
              background: 'transparent',
            }),
            borderRadius: '12px',
            margin: darkMode ? '4px 0' : 0,
            '&:hover': {
              '& .MuiTreeItem-label': {
                color: accentColor,
                textShadow: `0 0 8px ${alpha(accentColor, 0.6)}`,
              }
            },
          },
          label: {
            fontSize: '1.2rem',
            padding: '8px 16px',
            borderRadius: '10px',
            ...(!darkMode && {
              color: 'rgba(0, 2, 3, 0.9)',
              letterSpacing: '0.5px',
            }),
            ...(darkMode && {
              color: 'rgba(255, 255, 255, 0.9)',
              letterSpacing: '0.5px',
            }),
          },
          content: {
            ...(!darkMode && {
              backgroundColor: 'transparent !important',
              background: 'linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(223, 227, 238, 0.6))',
              boxShadow: 'inset 1px 1px 3px rgba(223, 227, 238, 0.5), inset -1px -1px 3px rgba(255, 255, 255, 0.8)',
            }),
            ...(darkMode && {
              backgroundColor: 'transparent !important',
              background: 'linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02))',
              boxShadow: 'inset 1px 1px 2px rgba(0, 0, 0, 0.2), inset -1px -1px 2px rgba(255, 255, 255, 0.05)',
            }),
            padding: '4px',
            borderRadius: '12px',
            '&:hover': {
              ...(!darkMode && {
                backgroundColor: 'transparent !important',
              }),
              ...(darkMode && {
                backgroundColor: 'transparent !important',
              }),
            },
            '&.Mui-expanded': {
              ...(!darkMode && {
                backgroundColor: 'transparent !important',
                background: 'linear-gradient(135deg, rgba(223, 227, 238, 0.6), rgba(255, 255, 255, 0.9))',
                boxShadow: 'inset 2px 2px 5px rgba(223, 227, 238, 0.8), inset -2px -2px 5px rgba(255, 255, 255, 0.9), 0 0 20px rgba(223, 227, 238, 0.4)',
              }),
              ...(darkMode && {
                backgroundColor: 'transparent !important',
                background: 'linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.05))',
                boxShadow: 'inset 2px 2px 4px rgba(0, 0, 0, 0.3), inset -2px -2px 4px rgba(255, 255, 255, 0.05), 0 0 15px rgba(0, 255, 242, 0.1)',
              }),
              '& .MuiTreeItem-label': {
                color: accentColor,
                textShadow: `0 0 8px ${alpha(accentColor, 0.4)}`,
              },
              '& .MuiSvgIcon-root': { 
                color: `${accentColor} !important`,
              },
            },
            '&.Mui-focused, &.Mui-selected': {
              ...(!darkMode && {
                backgroundColor: 'transparent !important',
              }),
              ...(darkMode && {
                backgroundColor: 'transparent !important',
              }),
              '& .MuiTreeItem-label': {
                color: accentColor,
                textShadow: `0 0 8px ${alpha(accentColor, 0.4)}`,
              }
            },
          },
          iconContainer: {
            '& .MuiSvgIcon-root': {
              fontSize: '1.2rem',
              ...(!darkMode && {
                color: 'rgba(0, 2, 3, 0.9)',
              }),
              ...(darkMode && {
                color: 'rgba(255, 255, 255, 0.9)',
              }),
            },
          },
          group: {
            ...(!darkMode && {
              borderLeft: `1px solid ${alpha(baseColor, 0.2)}`,
              boxShadow: '-1px 0 8px rgba(223, 227, 238, 0.3)',
            }),
            ...(darkMode && {
              borderLeft: '1px solid rgba(0, 255, 242, 0.15)',
              boxShadow: '-1px 0 8px rgba(0, 255, 242, 0.05)',
            }),
          }
        },
      },
      
      MuiChip: {
        styleOverrides: {
          root: {
            borderRadius: '12px',
            margin: darkMode ? '4px 0' : 0,
            ...(!darkMode && {
              backgroundColor: 'transparent !important',
              background: 'linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(223, 227, 238, 0.45))',
              boxShadow: 'inset 2px 2px 6px rgba(223, 227, 238, 0.8), inset -2px -2px 6px rgba(255, 255, 255, 0.9), 0 4px 8px rgba(0, 0, 0, 0.05)',
              color: 'rgba(0, 2, 3, 0.9)',
            }),
            ...(darkMode && {
              backgroundColor: 'transparent !important',
              background: 'linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03))',
              boxShadow: 'inset 2px 2px 4px rgba(0, 0, 0, 0.3), inset -2px -2px 4px rgba(255, 255, 255, 0.07), 0 4px 10px rgba(0, 0, 0, 0.3)',
              color: 'rgba(255, 255, 255, 0.9)',
            }),
            '&:hover': {
              ...(!darkMode && {
                backgroundColor: 'transparent !important',
                background: 'linear-gradient(135deg, rgba(223, 227, 238, 0.45), rgba(255, 255, 255, 0.95))',
                boxShadow: 'inset 3px 3px 7px rgba(223, 227, 238, 0.9), inset -3px -3px 7px rgba(255, 255, 255, 1), 0 6px 12px rgba(0, 0, 0, 0.08)',
              }),
              ...(darkMode && {
                backgroundColor: 'transparent !important',
                background: 'linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.09))',
                boxShadow: 'inset 3px 3px 6px rgba(0, 0, 0, 0.4), inset -3px -3px 6px rgba(255, 255, 255, 0.08), 0 8px 15px rgba(0, 255, 242, 0.15)',
              }),
              '& .MuiChip-label': {
                color: accentColor,
                textShadow: `0 0 8px ${alpha(accentColor, 0.5)}`,
              },
            },
          },
          deleteIcon: {
            ...(!darkMode && {
              color: 'rgba(0, 2, 3, 0.9)',
            }),
            ...(darkMode && {
              color: 'rgba(255, 255, 255, 0.9)',
            }),
            '&:hover': {
              color: accentColor,
            },
          },
          label: {
            fontSize: '0.9rem',
            padding: '4px 8px',
            borderRadius: '8px',
            ...(!darkMode && {
              color: 'rgba(0, 2, 3, 0.9)',
              letterSpacing: '0.5px',
            }),
            ...(darkMode && {
              color: 'rgba(255, 255, 255, 0.9)',
              letterSpacing: '0.5px',
            }),
          },
          colorPrimary: {
            ...(!darkMode && {
              backgroundColor: 'transparent',
              background: 'linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(223, 227, 238, 0.45))',
              boxShadow: 'inset 2px 2px 6px rgba(223, 227, 238, 0.8), inset -2px -2px 6px rgba(255, 255, 255, 0.9), 0 4px 8px rgba(0, 0, 0, 0.05)',
              color: 'rgba(0, 2, 3, 0.9)',
            }),
            ...(darkMode && {
              backgroundColor: 'transparent',
              background: 'linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03))',
              boxShadow: 'inset 2px 2px 4px rgba(0, 0, 0, 0.3), inset -2px -2px 4px rgba(255, 255, 255, 0.07), 0 4px 10px rgba(0, 0, 0, 0.3)',
              color: 'rgba(255, 255, 255, 0.9)',
            }),
          },
          outlined: {
            ...(!darkMode && {
              backgroundColor: 'transparent !important',
              background: 'linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(223, 227, 238, 0.45))',
              boxShadow: 'inset 2px 2px 6px rgba(223, 227, 238, 0.8), inset -2px -2px 6px rgba(255, 255, 255, 0.9), 0 4px 8px rgba(0, 0, 0, 0.05)',
              border: `1px solid ${alpha(baseColor, 0.5)}`,
            }),
            ...(darkMode && {
              backgroundColor: 'transparent !important',
              background: 'linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03))',
              boxShadow: 'inset 2px 2px 4px rgba(0, 0, 0, 0.3), inset -2px -2px 4px rgba(255, 255, 255, 0.07), 0 4px 10px rgba(0, 0, 0, 0.3)',
              border: '1px solid rgba(0, 255, 242, 0.25)',
            }),
            '&:hover': {
              ...(!darkMode && {
                backgroundColor: 'transparent !important',
                background: 'linear-gradient(135deg, rgba(223, 227, 238, 0.45), rgba(255, 255, 255, 0.95))',
                boxShadow: 'inset 3px 3px 7px rgba(223, 227, 238, 0.9), inset -3px -3px 7px rgba(255, 255, 255, 1), 0 6px 12px rgba(0, 0, 0, 0.08)',
                border: `2px solid ${accentColor}`,
              }),
              ...(darkMode && {
                backgroundColor: 'transparent !important',
                background: 'linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.09))',
                boxShadow: 'inset 3px 3px 6px rgba(0, 0, 0, 0.4), inset -3px -3px 6px rgba(255, 255, 255, 0.08), 0 8px 15px rgba(0, 255, 242, 0.15)',
                border: `2px solid ${accentColor}`,
              }),
            },
          },
        },
      },
      
      MuiButton: {
        styleOverrides: {
          root: {
            borderRadius: '12px',
            margin: darkMode ? '4px 0' : 0,
            '&:hover': {
              '& .MuiButton-label': {
                color: accentColor,
                textShadow: `0 0 8px ${alpha(accentColor, 0.6)}`,
              }
            },
          },
          contained: {
            ...(!darkMode && {
              backgroundColor: 'transparent !important',
              background: 'linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(223, 227, 238, 0.6))',
              boxShadow: 'inset 1px 1px 3px rgba(223, 227, 238, 0.5), inset -1px -1px 3px rgba(255, 255, 255, 0.8)',
              color: 'rgba(0, 2, 3, 0.9)',
              letterSpacing: '0.5px',
            }),
            ...(darkMode && {
              backgroundColor: 'transparent !important',
              background: 'linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02))',
              boxShadow: 'inset 1px 1px 2px rgba(0, 0, 0, 0.2), inset -1px -1px 2px rgba(255, 255, 255, 0.05)',
              color: 'rgba(255, 255, 255, 0.9)',
              letterSpacing: '0.5px',
            }),
            '&:hover': {
              ...(!darkMode && {
                backgroundColor: 'transparent !important',
                background: 'linear-gradient(135deg, rgba(223, 227, 238, 0.6), rgba(255, 255, 255, 0.9))',
                boxShadow: 'inset 2px 2px 5px rgba(223, 227, 238, 0.8), inset -2px -2px 5px rgba(255, 255, 255, 0.9), 0 0 20px rgba(223, 227, 238, 0.4)',
                color: accentColor,
                textShadow: `0 0 8px ${alpha(accentColor, 0.4)}`,
              }),
              ...(darkMode && {
                backgroundColor: 'transparent !important',
                background: 'linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.05))',
                boxShadow: 'inset 2px 2px 4px rgba(0, 0, 0, 0.3), inset -2px -2px 4px rgba(255, 255, 255, 0.05), 0 0 15px rgba(0, 255, 242, 0.1)',
                color: accentColor,
                textShadow: `0 0 8px ${alpha(accentColor, 0.4)}`,
              }),
            },
            '&:active': {
              ...(!darkMode && {
                boxShadow: 'inset 3px 3px 6px rgba(223, 227, 238, 0.6), inset -3px -3px 6px rgba(255, 255, 255, 0.5)',
              }),
              ...(darkMode && {
                boxShadow: 'inset 3px 3px 5px rgba(0, 0, 0, 0.4), inset -3px -3px 5px rgba(255, 255, 255, 0.03)',
              }),
            },
            '&.Mui-focused, &.Mui-selected': {
              ...(!darkMode && {
                backgroundColor: 'transparent !important',
              }),
              ...(darkMode && {
                backgroundColor: 'transparent !important',
              }),
              color: accentColor,
              textShadow: `0 0 8px ${alpha(accentColor, 0.4)}`,
            },
          },
          outlined: {
            ...(!darkMode && {
              backgroundColor: 'transparent !important',
              background: 'linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(223, 227, 238, 0.6))',
              boxShadow: 'inset 1px 1px 3px rgba(223, 227, 238, 0.5), inset -1px -1px 3px rgba(255, 255, 255, 0.8)',
              color: 'rgba(0, 2, 3, 0.9)',
              letterSpacing: '0.5px',
              border: `1px solid ${alpha(baseColor, 0.4)}`,
            }),
            ...(darkMode && {
              backgroundColor: 'transparent !important',
              background: 'linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02))',
              boxShadow: 'inset 1px 1px 2px rgba(0, 0, 0, 0.2), inset -1px -1px 2px rgba(255, 255, 255, 0.05)',
              color: 'rgba(255, 255, 255, 0.9)',
              letterSpacing: '0.5px',
              border: '1px solid rgba(0, 255, 242, 0.15)',
            }),
            '&:hover': {
              ...(!darkMode && {
                backgroundColor: 'transparent !important',
                background: 'linear-gradient(135deg, rgba(223, 227, 238, 0.6), rgba(255, 255, 255, 0.9))',
                boxShadow: 'inset 2px 2px 5px rgba(223, 227, 238, 0.8), inset -2px -2px 5px rgba(255, 255, 255, 0.9), 0 0 20px rgba(223, 227, 238, 0.4)',
                color: accentColor,
                textShadow: `0 0 8px ${alpha(accentColor, 0.4)}`,
                border: `1px solid ${accentColor}`,
              }),
              ...(darkMode && {
                backgroundColor: 'transparent !important',
                background: 'linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.05))',
                boxShadow: 'inset 2px 2px 4px rgba(0, 0, 0, 0.3), inset -2px -2px 4px rgba(255, 255, 255, 0.05), 0 0 15px rgba(0, 255, 242, 0.1)',
                color: accentColor,
                textShadow: `0 0 8px ${alpha(accentColor, 0.4)}`,
                border: `1px solid ${accentColor}`,
              }),
              '& .MuiSvgIcon-root': {
                color: `${accentColor} !important`,
              },
            },
            '&:active': {
              ...(!darkMode && {
                boxShadow: 'inset 3px 3px 6px rgba(223, 227, 238, 0.6), inset -3px -3px 6px rgba(255, 255, 255, 0.5)',
              }),
              ...(darkMode && {
                boxShadow: 'inset 3px 3px 5px rgba(0, 0, 0, 0.4), inset -3px -3px 5px rgba(255, 255, 255, 0.03)',
              }),
            },
            '&.Mui-focused, &.Mui-selected': {
              ...(!darkMode && {
                backgroundColor: 'transparent !important',
              }),
              ...(darkMode && {
                backgroundColor: 'transparent !important',
              }),
              color: accentColor,
              textShadow: `0 0 8px ${alpha(accentColor, 0.4)}`,
            },
          },
          textPrimary: {
            color: baseColor,
            '&:hover': {
              color: accentColor,
            },
          },
        },
      },
      
      MuiPaper: {
        styleOverrides: {
          root: {
            ...(!darkMode && {
              backgroundColor: 'transparent',
              background: 'linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(223, 227, 238, 0.6))',
              boxShadow: 'inset 1px 1px 3px rgba(223, 227, 238, 0.5), inset -1px -1px 3px rgba(255, 255, 255, 0.8)',
            }),
            borderRadius: '12px',
            '&:hover': {
              ...(!darkMode && {
                boxShadow: 'inset 2px 2px 5px rgba(223, 227, 238, 0.8), inset -2px -2px 5px rgba(255, 255, 255, 0.9)',
              }),
            },
          },
        },
      },
      MuiSimpleTreeView: {
        styleOverrides: {
          root: {
            background: darkMode ? '#000203' : '#ffffff',
            color: darkMode ? '#ffffff' : '#000203',
            borderRadius: '4px',
          },
        },
      },
    },
  });
};

export default getTheme;